<template>
  <div class="updateStu">
    <h1>修改学生信息</h1>
    <div class="stuImgBox">
      <p>学生头像</p>
      <div id="imgBox">

      <el-image
      v-show="isShow"
      style="width: 150px; height: 150px"
      :src=" 'http://localhost:3000/img/' + ( stuData.imagesName || 'defaultimg.jpg')"      
      fit="cover"></el-image>

      <UpLoadImg />
      </div>
    </div>
    <div class="contentBox">
      <label for="username" class="tip">学生姓名</label>
      <el-input id="username" placeholder="请输入姓名" v-model="stuData.name">
      </el-input>
    </div>
    <div class="contentBox">
      <label for="password" class="tip">年龄</label>
      <el-input
        type="number"
        id="username"
        placeholder="请输入年龄"
        v-model="stuData.age"
      ></el-input>
    </div>
    <div class="contentBox">
      <label for="password" class="tip">性别</label>
      <div class="genderBox">
        <el-radio v-model="stuData.gender" label="male">男</el-radio>
        <el-radio v-model="stuData.gender" label="female">女</el-radio>
      </div>
    </div>
    <div>
      <el-button type="primary" plain @click="open">确认修改</el-button>
    </div>
  </div>
</template>

<script>
import api from "@/http/api/apis.js";
import UpLoadImg from "../../uploadImg/UploadImg.vue";
import { createNamespacedHelpers, mapState } from "vuex";
const { mapState: imgMapState, mapMutations: imgMapMutations } =
  createNamespacedHelpers("img");

export default {
  components:{
    UpLoadImg
  },
  //接受动态路由的传值
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      stuData: {
        _id:'', //必填
        name:'', //必填
        age:'', //必填
        gender:'', //必填
        classId:'', //必填
        imagesName:''
      },
    }
  },
  //mounted 无法获取 跳转时 动态路由的 props接受值
  //所以使用 watch 监听
  watch: {
    id: {
      async handler(newValue, oldValue) {
        const _id = newValue;
        const {data} = await api.studentApi.getStudentById({_id});
        console.log(data)
        //赋值给data中的stuData
        this.stuData = data.data;
        console.log(this.stuData);
      },
      immediate: true,
    },
  },
  computed:{
    ...imgMapState(['filename','isShow'])
  },
  methods: {
    ...imgMapMutations(['changeFilename','changeIsShow']),

    open() {
      this.$confirm("确认修改学生?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const {data} = await api.studentApi.updateStu({
            ...this.stuData,
            // img上传图片状态机里的filename为空值，有图片上传成功后则不为空值
            imagesName:this.filename
          })
          if(data.status){
            console.log(data);
            this.$message({
              type: "success",
              message:data.message,
              // message: "修改成功!",
            });

            //修改成功后 将img上传图片状态机里的filename 设为空值
            this.changeFilename('')

            //修改成功后 跳转回学生列表页面
            this.$router.push('/stuSystem');
          }else{
            this.$message({
              type: "error",
              message: data.message,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改！",
          });
        });
    },
  },
  //离开修改页面时的 导航守卫
  beforeRouteLeave(to, from, next){
      const isLeave = confirm('是否跳转转到其他页面');
      if (isLeave) {        
        //只针对修改学生组件
        this.changeIsShow()
        next()
      };
  },
};
</script>

<style lang="scss" scoped src='./updateStu.scss'>